"use client";

import { CDN } from "@/utils/env";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useLanguageStore } from "@/store/languageStore";

export default function Mobile() {
  const { isMenuOpen, toggleMenu } = useLanguageStore(); // 从 zustand 获取状态和方法
  const [open, setOpen] = useState(false);
  const [isTop, setIsTop] = useState(true);

  useEffect(() => {
    const handleScroll = () => {
      setIsTop(window.scrollY < 50);
    };
    setIsTop(window.scrollY < 50);
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <header className="lg:hidden">
      <div className="h-[64px]"></div>
      <div
        className={`fixed h-[64px] left-0 top-0 w-full flex items-center justify-between px-[20px] z-10 transition-colors duration-200 ${
          isTop ? "bg-transparent" : "bg-[#FFF] shadow-lg"
        }`}
      >
        <div className="flex items-center">
          <img
            className="w-[30px] h-[30px]"
            src={`${CDN}images/home/logo.png`}
          />
          <div className="mx-[5px] text-[#333] text-[22px] font-[600]">
            alexander web
          </div>
        </div>
        <div className="flex items-center">
          <img
            className="w-[24px] h-[24px] cursor-pointer"
            src={`${CDN}images/home/language.svg`}
            onClick={() => {
              toggleMenu(!isMenuOpen); // 使用 zustand 的 toggleMenu 方法
            }}
          />
          <img
            className="size-[30px] ml-[24px]"
            src={`${CDN}images/home/menu.svg`}
            onClick={() => setOpen(true)}
          />
        </div>
      </div>
      {/* fixed 菜单 */}
      {open && <Menu onClose={() => setOpen(false)} />}
    </header>
  );
}

const Menu = ({ onClose }) => {
  const { t } = useTranslation();
  const router = useRouter();
  return (
    <div
      className="fixed left-0 top-0 w-full h-full bg-black/50 z-10"
      onClick={() => onClose()}
    >
      <div
        className="bg-white w-2/3 h-full"
        onClick={(e) => e.stopPropagation()}
      >
        <div
          className="text-[18px] font-[700] px-[8px] py-[10px] active:bg-gray-100"
          onClick={() => {
            onClose();
            router.push(`/${location.search}`);
          }}
        >
          {t("Home")}
        </div>
        <div
          className="text-[18px] font-[700] px-[8px] py-[10px] active:bg-gray-100"
          onClick={() => {
            onClose();
            router.push(`/download${location.search}`);
          }}
        >
          {t("Download")}
        </div>
        <div
          className="text-[18px] font-[700] px-[8px] py-[10px] active:bg-gray-100"
          onClick={() => {
            onClose();
            router.push(`/${location.search}#faq-section`);
          }}
        >
          {t("FAQ")}
        </div>
      </div>
    </div>
  );
};
